import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import AdvancedForm from '@/components/AdvancedForm';
import { Select, Radio } from 'antd';
// import UploadInput from '@/components/UploadInput';

const ManageForm = ({ form, roleData, dispatch, roleSelectData, mainSelectData }) => {
  // const [value, setValue] = useState(1);
  // const [visible, setVisible] = useState(1);
  const [avatarVisible, setAvatarVisible] = useState(false);

  // const onChangeVisible = e => {
  //   setValue(e.target.value);
  //   setVisible(e.target.value);
  // };
  const onChangeType = valueParam => {
    dispatch({
      type: 'smManageRule/manageSelect',
      payload: { groupId: valueParam },
    });
  };

  const formItems = [
    {
      name: 'id',
      hidden: true,
    },
    {
      name: 'code',
      hidden: true,
    },
    {
      label: '用户名',
      name: 'username',
      span: 4,
      rules: [{ required: true, message: '请输入用户名!', whitespace: true }],
    },
    {
      label: '昵称',
      name: 'nickname',
      span: 4,
      rules: [{ required: true, message: '请输入用户昵称!', whitespace: true }],
    },
    {
      label: '密码',
      name: 'password',
      span: 4,
    },
    {
      label: '用户角色',
      name: 'roleId',
      span: 4,
      rules: [{ required: true, message: '请选择用户角色!', whitespace: true }],
      render: (
        <Select allowClear onChange={onChangeType}>
          {roleSelectData &&
            roleSelectData.map(item => <Select.Option key={item.id}>{item.name}</Select.Option>)}
        </Select>
      ),
    },
    {
      label: '认证主体',
      name: 'roleGroupId',
      span: 4,
      rules: [{ required: true, message: '请选择认证主体!', whitespace: true }],
      render: (
        <Select allowClear>
          {mainSelectData &&
            mainSelectData.map(item => <Select.Option key={item.id}>{item.name}</Select.Option>)}
        </Select>
      ),
    },
    {
      label: '手机号码',
      name: 'phone',
      span: 4,
      rules: [
        { required: true, message: '手机号码不能为空', trigger: 'blur' },
        {
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: '请输入正确的手机号码',
          trigger: 'blur',
        },
      ],
    },
    {
      label: '邮箱',
      name: 'mail',
      span: 4,
      rules: [
        { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
        {
          type: 'email',
          message: '请输入正确的邮箱地址',
          trigger: ['blur', 'change'],
        },
      ],
    },
    {
      label: '是否头像上传',
      name: 'hasAvatar',
      span: 4,
      render: (
        <Radio.Group>
          <Radio value="YES">是</Radio>
          <Radio value="NO">否</Radio>
        </Radio.Group>
      ),
    },
    {
      label: '',
      visible: avatarVisible,
      name: 'avatar',
      type: 'image',
    },
  ];

  useEffect(() => {
    if (roleData) {
      form.setFieldsValue({ ...roleData });
    }
  }, [roleData]);

  const fieldChangeHander = (label, value) => {
    if (label === 'hasAvatar') {
      setAvatarVisible(value === 'YES');
    }
  };

  return <AdvancedForm form={form} fields={formItems} fieldChange={fieldChangeHander} />;
};
ManageForm.useForm = AdvancedForm.useForm;

export default connect(({ smManageRule }) => ({
  roleSelectData: smManageRule.roleSelectData,
  mainSelectData: smManageRule.mainSelectData,
  smManageRule,
}))(ManageForm);
